<template>
  <el-dialog
    title="编辑审批情况"
    :visible.sync="dialogVisible"
    width="80%"
    :before-close="handleClose">
    <el-form :model="dataForm" :rules="rules" ref="ruleForm" label-width="200px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="权属/管理单位:" prop="ownershipUnit">
            <el-input v-model="dataForm.ownershipUnit" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="业主代表:" prop="ownerName">
            <el-input v-model="dataForm.ownerName" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="工程实体名称:" prop="engineeringName">
            <el-input v-model="dataForm.engineeringName" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="建（构）筑物名称:" prop="buildingName">
            <el-input v-model="dataForm.buildingName" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="建（构）筑物类型:" prop="buildingType">
            <el-select
              v-model="dataForm.buildingType"
              placeholder="请选择建筑物类型"
              style="width: 100%"
              disabled
            >
              <el-option v-for="item in buildingTypeList" :key="item.itemValue" :label="item.itemLabel" :value="item.itemValue">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="穿越类型:" prop="throughType">
            <el-select
              v-model="dataForm.throughType"
              placeholder="请选择穿越类型"
              style="width: 100%"
              disabled
            >
              <el-option v-for="item in throughTypeList" :key="item.itemValue" :label="item.itemLabel" :value="item.itemValue">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所在行政区:" prop="region">
            <el-cascader
              separator="，"
              disabled
              placeholder="请选择所在行政区"
              style="width:100%;"
              :options="pcaTextArr"
              v-model="dataForm.region">
            </el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="里程范围:" prop="mileageRange">
            <el-input v-model="dataForm.mileageRange"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="距工程实体距离:" prop="engineeringDistance">
            <el-input v-model="dataForm.engineeringDistance"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="地铁结构埋深:" prop="buriedDepth">
            <el-input v-model="dataForm.buriedDepth"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="地质情况:" prop="geology">
            <el-input v-model="dataForm.geology"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="设计方案审批意见状态:" prop="approvalStatus">
            <el-input v-model="dataForm.approvalStatus"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设计方案审批意见时间:" prop="approvalTime">
            <el-date-picker
              v-model="dataForm.approvalTime"
              type="date"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
              style="width: 100%;"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="计划完成设计方案审批时间:" prop="planTime">
            <el-date-picker
              v-model="dataForm.planTime"
              type="date"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
              style="width: 100%;"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">关 闭</el-button>
      <el-button type="primary" @click="submitHandle">确 认</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { updApprovalInfo } from '@/api/designingScheme'
import { dictDataList } from '@/api/approvalSetting'

import { regionData, pcaTextArr } from 'element-china-area-data'

export default {
  name: 'ApprovalStatus',
  data () {
    return {
      pcaTextArr,
      regionData,
      dialogVisible: false,
      dataForm: {
        id: undefined,
        ownershipUnit: undefined,
        ownerName: undefined,
        engineeringName: undefined,
        buildingName: undefined,
        buildingType: undefined,
        mileageRange: undefined,
        engineeringDistance: undefined,
        buriedDepth: undefined,
        throughType: undefined,
        geology: undefined,
        region: undefined,
        approvalStatus: undefined,
        approvalTime: undefined,
        planTime: undefined
      },
      rules: {
        ownershipUnit: [
          { max: 50, message: '最大50个字符', trigger: 'change' }
        ],
        ownerName: [
          { max: 50, message: '最大50个字符', trigger: 'change' }
        ],
        engineeringName: [
          { max: 50, message: '最大50个字符', trigger: 'change' }
        ],
        buildingName: [
          { max: 50, message: '最大50个字符', trigger: 'change' }
        ],
        buildingType: [
          { max: 50, message: '最大50个字符', trigger: 'change' }
        ],
        mileageRange: [
          { max: 50, message: '最大50个字符', trigger: 'change' }
        ],
        engineeringDistance: [
          { max: 50, message: '最大50个字符', trigger: 'change' }
        ],
        buriedDepth: [
          { max: 50, message: '最大50个字符', trigger: 'change' }
        ],
        throughType: [
          { max: 50, message: '最大50个字符', trigger: 'change' }
        ],
        geology: [
          { max: 50, message: '最大50个字符', trigger: 'change' }
        ],
        approvalStatus: [
          { max: 50, message: '最大50个字符', trigger: 'change' }
        ],
        approvalTime: [
          { max: 50, message: '最大50个字符', trigger: 'change' }
        ],
        planTime: [
          { max: 50, message: '最大50个字符', trigger: 'change' }
        ]
      },
      throughTypeList: [],
      buildingTypeList: []
    }
  },
  mounted () {
    dictDataList({
      dictName: '',
      dictType: 'through_type',
      dictValue: '',
      pageNo: 1,
      pageSize: 9999,
      searchType: 'project'
    }).then(res => {
      this.throughTypeList = res.data.list
    })
    dictDataList({
      dictName: '',
      dictType: 'building_type',
      dictValue: '',
      pageNo: 1,
      pageSize: 9999,
      searchType: 'project'
    }).then(res => {
      this.buildingTypeList = res.data.list
    })
  },
  methods: {
    init (row) {
      this.dataForm.id = row.schemeId
      this.dataForm.ownershipUnit = row.ownershipUnit
      this.dataForm.ownerName = row.ownerName
      this.dataForm.engineeringName = row.engineeringName
      this.dataForm.buildingName = row.buildingName
      this.dataForm.buildingType = row.buildingType
      this.dataForm.mileageRange = row.mileageRange
      this.dataForm.engineeringDistance = row.engineeringDistance
      this.dataForm.buriedDepth = row.buriedDepth
      this.dataForm.throughType = row.throughType
      this.dataForm.geology = row.geology
      this.dataForm.region = row.region && row.region.split(',') || ''
      this.dataForm.approvalStatus = row.approvalStatus
      this.dataForm.approvalTime = row.approvalTime
      this.dataForm.planTime = row.planTime
      this.dialogVisible = true
    },
    submitHandle () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const query = JSON.parse(JSON.stringify(this.dataForm))
          query.region = query.region && query.region.join(',') || ''
          updApprovalInfo(query).then(res => {
            if (res.code === 'success') {
              this.$message.success('操作成功')
              this.$refs.ruleForm.resetFields()
              this.$emit('goBack')
              this.dialogVisible = false
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleClose () {
      this.$refs.ruleForm.resetFields()
      this.dialogVisible = false
    }
  }
}
</script>
<style scoped lang='scss'>

</style>
